<template>
  <el-button type="primary" style="float: left;" @click="addworker">添加送水工</el-button>
  <el-button v-if="isShow" type="primary" style="float: left;" @click="back">返回</el-button>
  <el-input v-model="search" size="big" style="width: 200px;" placeholder="请输入送水工姓名" />
  <el-button type="primary" style="margin-left: 10px;" @click="searchworker">搜索</el-button>
  <el-table :data="tableData"
            stripe
            style="width: 100%;margin-top: 10px">
    <el-table-column prop="id" label="送水工编号" width="220"  align="center"/>
    <el-table-column prop="name" label="送水工名称" width="220" align="center" />
    <el-table-column prop="base_salary" label="送水工底薪" width="220" align="center"/>
    <el-table-column prop="commission" label="送水工提成" width="220" align="center"/>

    <el-table-column label="操作" align="center">
      <template #default="scope">
      <edit class="edit" @click="editworker(scope.row)"/>
      <delete class="del" @click="delworker(scope.row)"/>
      </template>
    </el-table-column>
  </el-table>
  <AddWorker ref="addwk"/>
  <EditWorker ref="editwk"/>
  <DelWorker ref="delwk"/>
</template>

<script>

import AddWorker from "@/components/AddWorker";
import EditWorker from "@/components/EditWorker";
import axios from "axios";
import DelWorker from "@/components/DelWorker";
export default {

  components: {DelWorker, EditWorker, AddWorker},
  data() {
    return {
      search:'',
      isShow:false,
      tableData: [],

    }
  },
  mounted() {
    this.fetchdata();
  },
  methods: {
    //返回事件
    back(){
      this.search='';
      this.isShow=false;
     this.fresh();
    },
    //按姓名查找
    searchworker(){
      this.isShow=true;
      axios.get("/worker/findName/"+this.search)
          .then(
              response => (
                  this.tableData = response))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    addworker() {
      var that = this;
      that.$refs.addwk.init();
    },
    editworker(row) {
      var that = this;
      that.$refs.editwk.init(row.id);
    },
    delworker(row){
      var that = this;
      that.$refs.delwk.init(row.id,row.name);
    },
    //获取后端数据
    fetchdata() {
      axios.get("/worker/findAll")
          .then(
              response => (
                this.tableData = response))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    //更新数据
    fresh(){
      this.loading=true;
      this.fetchdata();
    }
  }
}

</script>

<style scoped>
.edit{
  width: 1.2em;
  height: 1.2em;
  color: #1E90FF;
  margin-top: 3px;
  margin-right: 4px;
  margin-left: 4px;
  cursor:pointer;
}
.del{
  width: 1.2em;
  height: 1.2em;
  color: #ed1941;
  margin-top: 3px;
  cursor:pointer;
}
</style>